<template>
  <div id="creditChart" style="width:48%;height:400px;background:#fff;"></div>
</template>

<script>
import echarts from "echarts";
// import { getFinanceTime } from '@/api/article'
import { statistic } from "@/api/system/user";
export default {
  data() {
    return {
      option: {
        legend: {},
        xAxis: {},
        yAxis: {},
        label: {},
        toolTip: {},
        series: []
      },
      data: [],
      dataX: [],
      dataY: []
    };
  },
  created() {
    // this.getFinanceTime()
    this.getInfo();
  },
  mounted() {},
  methods: {
    drawLine() {
      this.chartLine = echarts.init(document.getElementById("creditChart"));
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          //设置tip提示
          trigger: "axis"
        },

        legend: {
          //设置区分（哪条线属于什么）
          data: []
        },
        color: [], //设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {
          //设置x轴
          type: "category",
          boundaryGap: false, //坐标轴两边不留白
          data: this.dataX,
          nameTextStyle: {
            //坐标轴名称的文字样式
            color: "#FA6F53",
            fontSize: 16,
            padding: [0, 0, 0, 20]
          },
          axisLine: {
            //坐标轴轴线相关设置。
            lineStyle: {
              // color: '#FA6F53',
            }
          }
        },
        yAxis: {
          name: "授信数（笔）",
          nameTextStyle: {
            color: "#808080",
            fontSize: 18,
            padding: [0, 0, 0, 60]
          },
          axisLine: {
            lineStyle: {
              // color: '#FA6F53',
            }
          },
          type: "value"
        },
        series: [
          {
            name: "授信数",
            data: this.dataY,
            type: "line", // 类型为折线图
            lineStyle: {
              // 线条样式 => 必须使用normal属性
              normal: {
                color: "#2e82ff"
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option);
    },
    getInfo() {
      let params = {
        flag: 2
      };
      // this.listLoading = true
      statistic(params).then(response => {
        // this.topList = response
        // this.listLoading = false
        this.data = response.reverse();
        this.data.forEach(element => {
          if (element.date && element.count.toString()) {
            this.dataX.push(element.date);
            this.dataY.push(element.count);
          }
        });
        this.drawLine();
      });
    }
    // getFinanceTime() {
    //   getFinanceTime().then(res => {
    //     if (res.code == 200) {
    //       this.data = res.data
    //       this.data.forEach(element => {
    //         if (element.timedis && element.productNum) {
    //           this.dataX.push(element.timedis)
    //           this.dataY.push(element.productNum)
    //         }
    //       });
    //       this.drawLine()
    //     }
    //   })
    // },
  }
};
</script>
<style scoped>
</style>
